<template>
	<view>
		<view v-for="(v,i) in list" :key="i" @click.stop="clickItem(v)">
			<view class="lesson-item" :class="{ 'border': showBorder }">
				<text class="store-act" v-if="isChoose&&(chooseId == v.id)">已选</text>
				<view class="flex" style="margin-bottom: 30rpx;">
					<image :src="$img(v.cover)" mode="aspectFill" class="image" />
					<view class="" v-if="type == 1">
						<view class="store-name">{{ v.title }}</view>
						<view class="store-time">
							<text class="gray">营业时间：</text>
							<text>{{ v.date || '09:00-21:00'}}</text>
						</view>
					</view>
					<view class="f1 between column" v-if="type == 2">
						<view class="flex">
							<view class="lesson-name">{{ v.title }}</view>
							<view class="red" v-if="showPrice">
								<text style="font-size: 32rpx;font-weight: bold;">￥{{ v.price }}</text>
								<text style="font-size: 20rpx;">{{ priceUnit }}</text>
							</view>
							<!-- <view class="" :class="{'red':v.status < 4}">
								{{ v.status == 1?'待支付':(v.status == 2?'已支付':(v.status == 3?'已使用':'已完成'))}}
							</view> -->
						</view>
						<view class="">
							<view class="lesson-time">
								<text class="gray">时间：</text>
								<text>{{ v.start_at }}</text>
							</view>
							<view class="lesson-teacher" @click.stop="checkTeacher(v)">
								<text class="gray">教练：</text>
								<text v-if="v.coach && v.coach.name">{{ v.coach.name }}</text>
								<text v-else-if="coachName">{{ coachName }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="location">
					<text class="gray">{{ locationKey }}：</text>
					<text>{{ v.location || '暂未确定位置'}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/libs/config.js'
	export default {
		name:"card",
		props: {
			current: {
				type: String || Number,
				default: '',
			},
			list:{
				type: Array,
				default:()=>{ return [] }
			},
			type: {
				type: Number,
				default: 1,
			},
			showPrice: {
				type: Boolean,
				default: false,
			},
			locationKey: {
				type: String,
				default: '门店位置'
			},
			priceUnit: {
				type: String,
				default: '/次'
			},
			showBorder: {
				type: Boolean,
				default: false,
			},
			isChoose: {
				type: Boolean,
				default: false,
			},
			chooseId: {
				type: String,
				default: '',
			},
			coachName: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				imgUrl: config.imgUrl
			};
		},
		methods: {
			clickItem(v) {
				this.$emit('checkItem',v)
			},
			checkTeacher(v) {
				this.$emit('checkTeacher',v)
			}
		}
	}
</script>

<style lang="scss" scoped>
.lesson-item {
	background-color: #FFF;
	border-radius: 20rpx;
	padding: 20rpx;
	margin: 20rpx 27rpx;
	padding-bottom: 0;
	font-size: 30rpx;
	position: relative;
	.store-act {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #F17816;
		color: #FFF;
		padding: 8rpx 24rpx;
		font-size: 24rpx;
		border-radius: 0 20rpx 0 20rpx;
	}
	.store-name {
		font-size: 29rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}
	.store-time {
		font-size: 26rpx;
	}
	.image {
		width: 220rpx;
		height: 153rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		background-color: #F0F0F0;
	}
	.lesson-name {
		flex: 1;
		font-size: 29rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.lesson-time {
		font-size: 26rpx;
	}
	.lesson-teacher {
		font-size: 27rpx;
		margin-top: 8rpx;
	}
	.location {
		border-top: 1rpx solid #F5F5F5;
		line-height: 80rpx;
		font-size: 24rpx;
	}
}
.border {
	border: 1rpx solid #F5F5F5;
}
.store-time {
	font-size: 26rpx;
}
</style>